/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-10-10 14:53:38
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-10-10 16:13:50
 * @FilePath: \fifty-small-projects\39背景图随密码长度清晰\39.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
let sub_btn = document.querySelector('.sub_btn')

let app_bg = document.querySelector('.app_bg')

let pwd_input = document.querySelector('.password input')

let max_length = 20

pwd_input.setAttribute('maxlength',max_length)

pwd_input.addEventListener('input',function(e){
  let value = pwd_input.value
  console.log(app_bg.style.filter);
  app_bg.style.filter = `blur(${(max_length - value.length)}px)`
  console.log(value);
})

sub_btn.addEventListener('click',function(e){
  let left = e.x - this.offsetLeft
  let top = e.y - this.offsetTop
  let ripple = createdRipple(left,top)

  sub_btn.appendChild(ripple)
  setTimeout(() => {
    ripple.remove()
  }, 480);
})


function createdRipple(left,top){
  let ripple = document.createElement('div')
  ripple.style.left = left+'px'
  ripple.style.top = top + 'px'
  ripple.classList.add('ripple')
  return ripple
}